<template>
	<div class="slideNav-wrapper">
		<div class="slideNav-title">
			<div class="slideNav-title-sectionInfo">
				<span> 第一章 我回来了 </span>
			</div>
		</div>
		<scroll ref="menuScroll" :top="231" :bottom="100">
			<div slot="menu" class="slideNav-menu-wrapper">
				<div class="menu-item" v-for="(item,index) in bookMarkList" :key="index" @click="handleClickMark(item)">
					<span class="menu-item-label">
						{{item.text}}
					</span>
				</div>
			</div>
		</scroll>
	</div>
</template>

<script>
	import {
		ebookMixin
	} from '../../utils/mixin.js';
	import Scroll from '@/components/common/Scroll.vue';
	import {getBookObjectProperty} from '@/utils/localstorage.js';
	export default {
		name: 'ebookslideNav',
		mixins: [ebookMixin],
		components:{
			Scroll
		},
		data() {
			return {
				bookMarkList:[]
			}
		},
		methods: {
			handleClickMark(item) {
				this.display(item.cfi,() => {
					// 设置sction
					this.hideTitleAndMenu()
				})
			}
		},
		mounted() {
			this.bookMarkList =  getBookObjectProperty(this.fileName,'bookMarkList')
		}
	}
</script>

<style lang="scss">
	@import '@/assets/styles/global.scss';
	
	.slideNav-wrapper {
		letter-spacing: pxTorem(1);
		.slideNav-title {
			@include  flexSpacebetween;
			padding: 0 pxTorem(20);
			height: pxTorem(40);
			border-bottom: pxTorem(1) solid #C7CFBD;
			box-sizing: border-box;
			.slideNav-title-sectionInfo {
				font-size: pxTorem(16);
				.searchByKeyTotal {
					color: #8D9686;
				}
			}
			.slideNav-title-desc {
				font-weight: bold;
			}
		}
		.slideNav-menu-wrapper {
			padding-left: pxTorem(20);
			box-sizing: border-box;
			.menu-item {
				@include  flexSpacebetween;
				border-bottom: pxTorem(1) solid #C7CFBD;
				height: pxTorem(55);
				padding-right: pxTorem(20);
				&:last-child {
					border-bottom: none;
				}
				&.selected {
					.menu-item-label {
						color: #70973F;
					}
				}
				.menu-item-label {
					color: #6b7963;
					font-size: pxTorem(14);
					@include  overShowSpot;
				}
				
			}
		}
		.slideNav-search-wrapper {
			.slideNav-search-item {
				padding: pxTorem(15) 0;
				border-bottom: pxTorem(1) solid #C7CFBD;
				.search-item-title {
					font-size: pxTorem(14);
					color: #8D9686;
				}
				.search-item-content {
					font-size: pxTorem(16);
					@include  overShowSpotNum(2);
					line-height: pxTorem(20);
					.keyWord {
						color: #66943B;
					}
				}
				
				&:last-child {
					border-bottom: none;
				}
			}
		}
	}
</style>
